<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>用户列表</title>
<style type="text/css">
.deptTree {
    width: 100% !important;
    height: -webkit-calc(100vh - 43px);
    height: -moz-calc(100vh - 43px);
    height: calc(100vh - 43px);
}
</style>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-sm8 layui-col-md10">
            <div class="layui-panel query-panel /*查询面板*/">
                <form class="layui-form layui-row layui-col-space16" lay-filter="query-form" onsubmit="return false;">
                    <input type="hidden" name="deptId" value="0">
		        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
						<div class="layui-input-wrap">
							<div class="layui-input-prefix">
								<i class="pear-icon pear-icon-text"></i>
							</div>
							<input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
						</div>
				    </div>
		        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
						<div class="layui-input-wrap">
                            <select name="status">
                                <option value="">-- 状态 --</option>
                            #DICTS('bean_status')#for(item : dicts)
                                <option value="#(item.value)"#if(status?? == item.value) selected#end>#(item.label)</option>
                            #end#end
                            </select>
                        </div>
                    </div>
		            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
		                <button type="button" class="pear-btn pear-btn-sm pear-btn-primary query-form-search">
		                    <i class="layui-icon layui-icon-search"></i> 搜索
		                </button>
		                <button type="button" class="pear-btn pear-btn-sm query-form-reset">
		                    <i class="layui-icon layui-icon-refresh"></i> 重置
		                </button>
		            </div>
                </form>
            </div>
            <div class="layui-panel data-panel /*数据面板*/">
                <table id="data-table" lay-filter="data-table"></table>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm4 layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="deptTreeContent" style="overflow: auto">
                        <ul id="deptTree" class="deptTree" data-id="deptId"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

#set(tableButtonsHtml = '')
#set(recordButtonsHtml = '')
#authPermissions('system:user:resetPassword', 'system:user:assignRole')
    #set(recordButtonsHtml = '<a class="pear-btn pear-btn-success pear-btn-xs" plain id="more_{{d.id}}" data-id="{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i>&nbsp;更多</a>')
#end
#include("../../_common/data_table_template.html"
    , customTableButtons = tableButtonsHtml
    , customRecordButtons = recordButtonsHtml
)

#include("../../_common/foot.html")

<script type="text/javascript">
/*
 * 定义权限开关
 */
var RIGHTS = { NONAME: null // 无用，占个位
//#authPermissions('system:user:add')
    ,add: true
//#end
//#authPermissions('system:user:edit')
    ,edit: true
//#end
//#authPermissions('system:user:del')
    ,remove: true
    ,batchRemove: true
//#end
//#authPermissions('system:user:query')
    ,detail: true
//#end
};

/*
 * 模块操作路径
 */
var MODULE_PATH = "#CTX()/admin/system/user/";

/*
 * 默认弹窗大小
 */
var POPUP_AREA = ['720px', '95%'];

/*
 * 数据表的OPTIONS
 */
var OPTIONS = {
    elem: '#data-table',
    url: MODULE_PATH + "query",
    method: "post",
    initSort: {"field": "createdDatetime", "type": "desc"},
    request: {pageName: 'pageNumber', limitName: 'pageSize' },
    page: true,
    height: 'full-94',
    toolbar: '#table-toolbar',
    defaultToolbar: [{title: "查询", layEvent: "toggle", icon: "layui-icon-search"}, 'filter'],
    size: 'sm',
    cols: [[
        {type: 'checkbox', align: 'center', width: 60},
        {field: 'status', align: 'center', width: 80, sort: true, title: '状态', templet: '#bean-status'},
        {field: 'account', align: 'left', minWidth: 100, width: '10%', sort: true, title: '登录账号'},
        {field: 'nickname', align: 'left', minWidth: 100, width: '15%', sort: true, title: '用户昵称'},
        {field: 'phone', align: 'left', width: 120, sort: true, title: '手机号'},
        {field: 'createdDatetime', align: 'center', width: 180, sort: true, title: '创建时间', templet: '#bean-createdDatetime'},
        {toolbar: '#record-toolbar', align: 'left', minWidth: 240, title: '操作'}
    ]]
};
</script>

<script src="#CTX()/admin/js/query_form.js?_v=#VERSION()"></script>
<script src="#CTX()/admin/js/data_table.js?_v=#VERSION()"></script>

<script type="text/javascript">
/*
 * Layui相关脚本
 */
layui.use(['jquery', 'common', 'dtree', 'dropdown'], () => {
	var $ = layui.jquery, form = layui.form, common = layui.common;
    var datatable = layui.table; // 数据表格
	var dtree = layui.dtree, dropdown = layui.dropdown;
    
    // 移动终端下隐藏部门树
    if (common.isModile()){
        $("#deptTreeContent").hide();
    }

    /*
     * OPTIONS的done方法在此定义，是因为它引用了此代码块引用的layui.dropdown
     */
    OPTIONS.done = (res, curr, count) => {
        for (var i = 0; i < res.data.length; i++) {
            var data = [];
            //#authPermissions('system:user:resetPassword')
            data.push({title: "<i class='pear-icon pear-icon-lock'></i>&nbsp;重置密码", menuId: 100, id: res.data[i].id});
            //#end
            if(res.data[i].id != 1) {
            //#authPermissions('system:user:assignRole')
            data.push({title: "<i class='pear-icon pear-icon-operation'></i>&nbsp;分配角色", menuId: 101, id: res.data[i].id});
            //#end
            }
            
            dropdown.render({
                elem: '#more_' + res.data[i].id,
                data: data,
                id: '#more_' + res.data[i].id,
                click: (obj) => {
                    if (obj.menuId == 100) {
                        // 重置密码
                        window.dataTable.resetPassword(obj.id);
                    }
                    if (obj.menuId == 101) {
                        // 分配角色
                        window.dataTable.assignRole(obj.id);
                    }
                }
            });
        }
    }
    
    /*
     * 渲染组织机构树
     */
    var DTree = dtree.render({
        elem: "#deptTree",
        initLevel: "3", //默认展开层级为1
        line: true, // 有线树
        ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
        icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
        method: 'get',
        url: "#CTX()/admin/system/dept/dtree"
    });

    /*
     * 绑定节点点击事件
     */
    dtree.on("node(deptTree)", function(obj) {
        $("[name='deptId']").val(obj.param.nodeId);
        window.dataTable.search();
    });

    /*
     * 重置密码
     */
    window.dataTable.resetPassword = (id) => {
        layer.open({
            type : 2,
            title : "重置密码",
            content : MODULE_PATH + "resetPassword?id=" + id,
            maxmin : false,
            area : POPUP_AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : (index, layero) => {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "resetPassword",
                        type : "put",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load();}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.code == 200){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.dataTable.refresh(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.description){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.description, {icon: 5});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }
    
    /*
     * 分配角色
     */
    window.dataTable.assignRole = (id) => {
        layer.open({
            type : 2,
            title : "分配角色",
            content : MODULE_PATH + "assignRole?id=" + id,
            maxmin : false,
            area : POPUP_AREA,
            closeBtn : 1,
            shadeClose : false,
            anim : 1,
            moveOut : false,
            resize : false,
            btn : [ '保存', '取消' ],
            yes : (index, layero) => {
                var iframeWindow = window['layui-layer-iframe' + index],
                submitID = 'data-save', // 此ID必须和弹出iframe窗口中提交按钮的ID和Filter值一致
                submit = layero.find('iframe').contents().find("#" + submitID);

                // 监听提交
                iframeWindow.layui.form.on('submit('+ submitID + ')', function(data) {
                    $.ajax({ // 用Ajax替换弹窗中的提交
                        url : MODULE_PATH + "assignRole",
                        type : "put",
                        data : data.field, // 获取提交的数据
                        beforeSend : function(){layer.load();}, // 防止重复操作
                        complete : function(){layer.closeAll('loading');}, //解除防重复操作
                        success : function(result){
                            if(result.code == 200){
                                // 提交 Ajax 成功后，静态更新表格中的数据
                                window.dataTable.refresh(); // 数据表格刷新
                                layer.close(index); //关闭弹层
                            } else {
                                if(result.description){
                                    // Ajax调用成功，但后台返回失败信息
                                    layer.alert(result.description, {icon: 5});
                                } else {
                                    layer.alert("操作失败！", {icon: 2});
                                }
                            }
                        },
                        error : function (e) { // Ajax调用失败
                            layer.alert("操作失败：" + e.responseText, {icon: 2});
                        }
                    });
                    return false; // 一定要返回False来阻止弹出窗口中提交按钮的再次提交
                });

                submit.trigger('click'); // 这里触发弹出窗口的提交按钮
            }
        });
    }
    
    /*
     * 页面加载完成时加载表格数据
     */
    $(document).ready(() => {
        window.dataTable.search();
    });
    
});
</script>

</body>
</html>
